import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import './index.scss'

interface UserInfo {
    id: string
    username: string
    email: string
    avatar: string
    phone: string
    department: string
    position: string
    joinDate: string
}

const Profile: React.FC = () => {
    const userInfo = useSelector((state: RootState) => state.user)
    const [isEditing, setIsEditing] = useState(false)
    const [formData, setFormData] = useState<UserInfo>({
        id: '001',
        username: '黄瑶',
        email: 'hy_1845@163.com',
        avatar: '',
        phone: '15619372451',
        department: '汽车事业部',
        position: '前端工程师',
        joinDate: '2025-07-07'
    })

    const handleEdit = () => {
        setIsEditing(true)
    }

    const handleSave = () => {
        // 这里可以调用API保存用户信息
        console.log('保存用户信息:', formData)
        setIsEditing(false)
    }

    const handleCancel = () => {
        setIsEditing(false)
        // 重置表单数据
    }

    const handleInputChange = (field: keyof UserInfo, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))
    }

    return (
        <div className="profile-container">
            <div className="profile-header">
                <h2>个人资料</h2>
                {!isEditing && (
                    <button className="edit-btn" onClick={handleEdit}>
                        编辑
                    </button>
                )}
            </div>

            <div className="profile-content">
                <div className="avatar-section">
                    <div className="avatar">
                        {formData.avatar ? (
                            <img src={formData.avatar} alt="头像" />
                        ) : (
                            <div className="avatar-placeholder">
                                {formData.username.charAt(0)}
                            </div>
                        )}
                    </div>
                    {isEditing && (
                        <button className="upload-btn">上传头像</button>
                    )}
                </div>

                <div className="info-section">
                    <div className="info-grid">
                        <div className="info-item">
                            <label>用户名</label>
                            {isEditing ? (
                                <input
                                    type="text"
                                    value={formData.username}
                                    onChange={(e) => handleInputChange('username', e.target.value)}
                                />
                            ) : (
                                <span>{formData.username}</span>
                            )}
                        </div>

                        <div className="info-item">
                            <label>邮箱</label>
                            {isEditing ? (
                                <input
                                    type="email"
                                    value={formData.email}
                                    onChange={(e) => handleInputChange('email', e.target.value)}
                                />
                            ) : (
                                <span>{formData.email}</span>
                            )}
                        </div>

                        <div className="info-item">
                            <label>手机号</label>
                            {isEditing ? (
                                <input
                                    type="tel"
                                    value={formData.phone}
                                    onChange={(e) => handleInputChange('phone', e.target.value)}
                                />
                            ) : (
                                <span>{formData.phone}</span>
                            )}
                        </div>

                        <div className="info-item">
                            <label>部门</label>
                            {isEditing ? (
                                <input
                                    type="text"
                                    value={formData.department}
                                    onChange={(e) => handleInputChange('department', e.target.value)}
                                />
                            ) : (
                                <span>{formData.department}</span>
                            )}
                        </div>

                        <div className="info-item">
                            <label>职位</label>
                            {isEditing ? (
                                <input
                                    type="text"
                                    value={formData.position}
                                    onChange={(e) => handleInputChange('position', e.target.value)}
                                />
                            ) : (
                                <span>{formData.position}</span>
                            )}
                        </div>

                        <div className="info-item">
                            <label>入职日期</label>
                            <span>{formData.joinDate}</span>
                        </div>
                    </div>

                    {isEditing && (
                        <div className="action-buttons">
                            <button className="save-btn" onClick={handleSave}>
                                保存
                            </button>
                            <button className="cancel-btn" onClick={handleCancel}>
                                取消
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}

export default Profile